<template>
    <div class="customer-list">
        <h2>顾客信息</h2>
        <table>
            <thead>
                <tr>
                    <th>用户ID</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th style="text-align: center; max-width: 50px;">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users" :key="user.id">
                    <td>{{ user.id }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.email }}</td>
                    <td style="text-align: center; max-width: 50px;">
                        <button style="padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px;"
                            @click="viewUserLogs(user.id)">查看日志</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 用户日志模态弹窗 -->
        <div v-if="showModal" class="modal">
            <div class="modal-content">
                <span class="close" @click="closeModal">&times;</span>
                <h2>用户日志</h2>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>操作类型</th>
                                <th>操作内容</th>
                                <th>操作时间</th>
                                <th>是否成功</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="log in userLogs" :key="log.actionTime">
                                <td>{{ log.username }}</td>
                                <td>{{ log.actionType }}</td>
                                <td>{{ log.action }}</td>
                                <td>{{ log.actionTime }}</td>
                                <td>
                                    <span :class="log.success === '成功' ? 'success' : 'warning'">
                                        {{ log.success }}
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="pagination-controls">
                    <button @click="prevPage(userId)" :disabled="currentPage === 0">上一页</button>
                    <button @click="nextPage(userId)">下一页</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { get } from "../until/request";
import Swal from 'sweetalert2';

const users = ref([]);
const userLogs = ref([]);
const showModal = ref(false);
const selectedUserId = ref(null);
const currentPage = ref(0);  // 当前页码    
const pageSize = ref(8);  // 每页显示的记录数

onMounted(async () => {
    // 获取用户列表
    const response = await get('/admin/queryUserList');
    if (response.code === 1) {
        users.value = response.data;
    }
});

// 查看用户日志
async function viewUserLogs(userId, page = 1) {
    selectedUserId.value = userId;
    const response = await get('/admin/queryUserLog', { id: selectedUserId.value, page, size: pageSize.value });
    console.log(response);
    if (response.code === 1 && response.data.list.length > 0) {
        userLogs.value = response.data.list;
        showModal.value = true; // 显示模态弹窗
    } else {
        Swal.fire({
            icon: 'error',
            title: '用户暂无日志',
        });
    }
}

function closeModal() {
    showModal.value = false; // 关闭模态弹窗
}

function nextPage(userId) {
    currentPage.value += 1;
    viewUserLogs(selectedUserId.value, currentPage.value);
}

function prevPage(userId) {
    if (currentPage.value > 0) {
        currentPage.value -= 1;
        viewUserLogs(selectedUserId.value, currentPage.value);
    }
}
</script>

<style scoped>
.customer-list {
    padding: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

button {
    margin-right: 5px;
}

/* 模态弹窗样式 */
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-height: 80%;
    overflow-y: auto;
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}

.table-container {
    max-height: 60vh;
    overflow-y: auto;
}

thead th {
    position: sticky;
    top: 0;
    background-color: #f9f9f9;
    z-index: 1;
}

.success {
    background-color: #d4edda;
    color: #155724;
    padding: 4px 8px;
    border-radius: 4px;
}

.warning {
    background-color: #f8d7da;
    color: #721c24;
    padding: 4px 8px;
    border-radius: 4px;
}

.pagination-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.pagination-controls button {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    cursor: pointer;
}

.pagination-controls button:disabled {
    background-color: #e0e0e0;
    cursor: not-allowed;
}
</style>